<template>
  <el-row class="main">
    <el-row class="top-box">
      <el-row class="top">
        <el-row class="img-box">
          <el-col>
            <img src="../assets/profile3.jpg" alt="" />
          </el-col>
        </el-row>
        <el-row class="title-text"><el-col>不知所措的博客</el-col></el-row>
        <el-row class="title-text"><el-col>Ye 的 Blog</el-col></el-row>
        <el-row class="icon-box">
          <el-col>
            <el-tooltip content="返回主页" placement="bottom" >
              <el-button @click.native="$router.push('/')" size="mini" icon="iconfont icon-fl-jia" circle></el-button>
            </el-tooltip>
            <el-tooltip content="留言板" placement="bottom" >
              <el-button  @click.native="$router.push('/message')"  size="mini"   icon=" iconfont icon-comments"  circle ></el-button>
            </el-tooltip>
            <el-tooltip    content="改变字体" placement="bottom" >
              <el-button @click.native="fontFamily()"  size="mini" icon=" iconfont icon-font" circle></el-button>
            </el-tooltip>
            <el-tooltip    content="夜间模式" placement="bottom"   >
              <el-button @click.native="updateBackground()" size="mini" icon=" iconfont icon-moon-o" circle></el-button>
            </el-tooltip>
            <el-tooltip   content="全屏模式" placement="bottom"   >
              <el-button @click.native="setFullscreen()"  size="mini" icon=" iconfont icon-Expand" circle></el-button>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="recommend-text" :span="18" :offset="3">
            我是一个 24 岁的homeschooler，爱好旅行以及一切富有创造性的事物，尤其是摄影、设计和编程。这个世界就是我的学校。学自己之所想所爱。自由的身心定能使我成为一个一直朝前行走的行者。
          </el-col>
        </el-row>
      </el-row>
    </el-row>

     
    <el-row class="middle-box">
      <el-row class="item-box">
        <el-row class="item" v-for="(item,index) in messageArr" :key="index">
          <el-col :span="2" :offset="2"><img src="../assets/profile.png" alt=""/></el-col>
          <el-col :span="18" :offset="1" class="comment">
            <span>{{item.name}}</span>
            <span>{{item.content}}</span>
          </el-col>
        </el-row>
      
      </el-row>
    

      <el-row class="btn-box">
        <el-col :span="6" :offset="5" >
          <el-button  @click.native="$router.push('/message')" icon="el-icon-chat-line-square"  >查看更多</el-button >
        </el-col >
        <el-col :span="6" :offset="2" >
          <el-button  @click.native="$router.push('/message')" icon="el-icon-edit-outline">写新留言</el-button>
        </el-col >
      </el-row>
    </el-row>
  
    <el-row class="footer-box">
      <el-col class="logo">
        <img src="../assets/logo2.png" alt="" />
      </el-col>
      <el-col
        class="footer-img"
        :span="4"
        v-for="(item, index) in imgList"
        :key="index"
      >
        <img :src="item.img" alt="" />
        <el-col class="background">{{ item.text }}</el-col>
      </el-col>
      <el-col class="Camarts">
        以上作品精选自我的摄影网站 Camarts。<span class="load">浏览更多</span>
        <i class="el-icon-caret-right"></i>
      </el-col>
      <el-col class="copyright">
        <p>© XiaoYe Blog 2021.3.11 - 2021未完...</p>
        <p>Powered by WordPress. Designed and developed by Dandy Weng.</p>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import { ElMessage } from 'element-plus'
import { defineComponent, reactive } from "vue";
import { getMessageList } from '../api/index'
export default defineComponent({
  name: "HomeLeft",
  setup(props,{attrs,emit,slots}) {
    const imgArr = [
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover1.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover1.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover3.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
      {
        img: require("../assets/hover.jpg"),
        text: "奥里给",
      },
    ];
    const imgList = reactive(imgArr);
    const messageArr = reactive([])
   
    //更改字体
    function fontFamily(){
      let body = document.getElementsByTagName('body')[0]
      body.style.fontFamily === 'fangsong' ?  body.style.fontFamily= '微软雅黑' : body.style.fontFamily= 'fangsong' 
    }

    //跳转夜间/白天模式
    function updateBackground(){
      let bgc = document.getElementById('right')
      bgc.style.backgroundColor == 'rgba(39, 41, 43, 0.44)' ?  bgc.style.backgroundColor= 'rgba(202, 201, 208, 0.13)' : bgc.style.backgroundColor = 'rgba(39, 41, 43, 0.44)' 
      
    }
    //控制显示全屏
    function setFullscreen(element) {
      console.log(element)
        var el = element instanceof HTMLElement ? element : document.documentElement;
        //判断是否支持全屏
        var rfs = el.requestFullscreen       || 
                  el.webkitRequestFullscreen || 
                  el.mozRequestFullScreen    || 
                  el.msRequestFullscreen;
        if (rfs) {
            rfs.call(el);
            console.log(rfs)
        } else if (window.ActiveXObject) {
            var ws = new ActiveXObject("WScript.Shell");
            ws && ws.SendKeys("{F11}");
        }
    }
    
    //获取留言内容
    getMessage(0,1,6)
    async function getMessage(cid,page,num){
      let { code,message,data } =  await getMessageList(cid,page,num)
      if ( code === 200 && message === '获取成功' ){
        messageArr.length = 0
        messageArr.push(...data)
        console.log(messageArr)
      }else{
          ElMessage.error('获取留言数据失败!');
      }
    }


    return {
      imgList,
      fontFamily,
      setFullscreen,
      updateBackground,
      messageArr
    };
  },
});
</script>

<style lang="less" scoped>
body{
  .el-popper ,.is-light{
  background: none !important;
  border: none !important;
}
}
.main {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  .top-box {
    .top {
      display: flex;
      flex-flow: column;
      margin: 0 auto;
      text-align: center;
      .img-box {
        margin: 65px 0px 10px 0px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }

      .recommend-text {
        text-align: left;
        font-size: 14px;
        line-height: 1.5;
      }
      .icon-box {
        margin: 20px 0px;
        .el-button{
          color: rgba(255,255,255,0.8);
          border-color: rgba(255,255,255,0.35) rgba(255,255,255,0.45) rgba(255,255,255,0.55);
          background: rgb(0 0 0 / 20%);
          border: none;
        }
      }
      .title-text {
        font-size: 16px;
      }
    }
  }

  .middle-box {
    width: 100%;
    margin-top: 35px;
    .item-box {
      .item {
        width: 100%;
        margin-top: 10px;
        img {
          width: 100%;
          border-radius: 50%;
        }
        .comment {
          display: flex;
          flex-direction: column;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
    .btn-box {
      margin-top: 10px;
      width: 100%;
    }
  }
  .footer-box {
    .logo {
      margin-top: 60px;
      padding: 20px 0px;
      background-color: rgba(0,0,0,0.5);
      img {
        margin: 0 auto;
        display: inherit;
        width: 150px;
        height: 30px;
      }
    }
    .footer-img {
      position: relative;
      width: 70px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
      }
      .background {
        position: absolute;
        top: 0;
        opacity: 0;
        font-size: 12px;
        text-align: center;
        width: 75px;
        line-height: 50px;
        height: 50px;
        background: rgba(157, 158, 157, 0.672);
      }
    }
    .footer-img:hover .background {
      opacity: 1;
    }
    .Camarts {
      padding: 20px 10px;
      font-size: 12px;
      text-align: center;
      span {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.75);
      }
    }
    .copyright {
      margin: 20px 0px;

      font-size: 12px;
      text-align: center;
    }
  }
}
</style>